<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rock a Music Category Flat Bootstrap Responsive website Template | Single Page :: w3layouts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Rock Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
	SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, Sony Ericsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Custom Theme files -->
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">  
<!-- //Custom Theme files -->
<!-- font-awesome icons -->
<link href="css/font-awesome.css" rel="stylesheet"> 
<!-- //font-awesome icons -->
<!-- js -->
<script src="js/jquery-2.2.3.min.js"></script> 
<!-- //js -->
<!-- web-fonts --> 
<link href="//fonts.googleapis.com/css?family=Aladin" rel="stylesheet">
<link href='//fonts.googleapis.com/css?family=Roboto+Condensed:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>
<!-- //web-fonts --> 
<!-- start-smooth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>	
<script type="text/javascript">
		jQuery(document).ready(function($) {
			$(".scroll").click(function(event){		
				event.preventDefault();
				$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
			});
		});
</script>
<!-- //end-smooth-scrolling -->
</head>
<body>
	<!-- banner start here -->
	<div class="agileinfo-main about-top">  
		<div class="banner"> 
		</div> 
		<div class="agileinfo-header">
			<div class="container">
				<div class="agile-logo">
					<h1><a href="index.html"><i class="fa fa-music bounce bounceIn animated" aria-hidden="true"></i> Rock</a></h1>
				</div>
				<div class="agileits-w3layouts-icons">
					<div class="social-icon">
						<a href="#" class="social-button twitter"><i class="fa fa-twitter"></i></a>
						<a href="#" class="social-button facebook"><i class="fa fa-facebook"></i></a> 
						<a href="#" class="social-button google"><i class="fa fa-google-plus"></i></a> 
						<a href="#" class="social-button dribbble"><i class="fa fa-dribbble"></i></a>
						<a href="#" class="social-button skype"><i class="fa fa-skype"></i></a>
					</div> 
				</div>
				<div class="clearfix"> </div>
			</div>	    
		</div>
		<!-- navigation start here -->
		<div class="top-nav">
			<span class="menu">Menu</span>	
			<ul class="w3l">
				<li><a href="index.html"><i aria-hidden="true" class="glyphicon glyphicon-home"></i><span>Home</span></a></li>
				<li><a href="about.html"><i class="glyphicon glyphicon-user"></i><span>About</span></a></li>
				<li><a href="blog.html"><i class="glyphicon glyphicon-list-alt"></i><span>Blog</span></a></li>
				<li><a href="codes.html"><i class="glyphicon glyphicon-picture"></i><span>Short Codes</span></a></li>
				<li><a href="contact.html"><i class="glyphicon glyphicon-envelope"></i><span>Contact</span></a></li>
			</ul>
			<!-- script-for-menu -->
			<script>
			   $( "span.menu" ).click(function() {
				 $( "ul.w3l" ).slideToggle( 300, function() {
				 // Animation complete.
				  });
				 });
			</script>
			<!-- //script-for-menu -->
		</div>	
	</div>
	<!-- //navigation end here --> 
	<!-- single -->
	<div class="single">
		<div class="container">
			<div class="wthree_single_grid">
				<h2>culpa qui officia deserunt mollit</h2>
				<ul>
					<li><span class="fa fa-user" aria-hidden="true"></span><a href="#">Michael Smith</a></li>
					<li><span class="fa fa-tags" aria-hidden="true"></span><a href="#">5 Tags</a></li>
					<li><span class="fa fa-envelope-o" aria-hidden="true"></span><a href="#">5 Comments</a></li>
					<li><span class="fa fa-pencil-square-o" aria-hidden="true"></span>Recusandae</li>
				</ul>
			</div>
			<div class="agile_single_banner">
				<img src="images/s1.jpg" alt="" class="img-responsive" />
			</div>
			<div class="wthree_single_grid1">
				<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis 
					praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias
					excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
					officia deserunt mollitia animi, id est laborum et dolorum fuga. 
					<span>Et harum quidem rerum facilis est et expedita distinctio. Nam libero 
					tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus 
					id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis 
					dolor repellendus.</span> Temporibus autem quibusdam et aut officiis debitis 
					aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et 
					molestiae non recusandae. <span>Itaque earum rerum hic tenetur a sapiente delectus, 
					ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis 
					doloribus asperiores repellat.
					Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</span></p>
			</div> 
			<div class="popular-posts">
				<h4 class="w3ls-title">Popular Posts</h4>
				<div class="popular-posts-grids">
					<div class="col-md-3 col-sm-3 col-xs-6 popular-posts-grid">	
						<div class="popular-posts-grid1">
							<a href="single.html"><img src="images/img3.jpg" alt=" " class="img-responsive"></a>
							<h4><a href="single.html">dolori perior</a></h4>
							<p>Itaque earum rerum hic tenetur a sapiente delectus.</p>
						</div>
					</div>
					<div class="col-md-3 col-sm-3 col-xs-6 popular-posts-grid">	
						<div class="popular-posts-grid1">
							<a href="single.html"><img src="images/img4.jpg" alt=" " class="img-responsive"></a>
							<h4><a href="single.html">rerum tenetur</a></h4>
							<p>Itaque earum rerum hic tenetur a sapiente delectus.</p>
						</div>
					</div>
					<div class="col-md-3 col-sm-3 col-xs-6 popular-posts-grid">	
						<div class="popular-posts-grid1">
							<a href="single.html"><img src="images/img5.jpg" alt=" " class="img-responsive"></a>
							<h4><a href="single.html">saepe eveniet </a></h4>
							<p>Itaque earum rerum hic tenetur a sapiente delectus.</p>
						</div>
					</div>
					<div class="col-md-3 col-sm-3 col-xs-6 popular-posts-grid">	
						<div class="popular-posts-grid1">
							<a href="single.html"><img src="images/img6.jpg" alt=" " class="img-responsive"></a>
							<h4><a href="single.html">ipsum tenetur</a></h4>
							<p>Itaque earum rerum hic tenetur a sapiente delectus.</p>
						</div>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
			<div class="author">
				<h4 class="w3ls-title"> About Admin </h4>
				<div class="author-grid">
					<div class="author-grid-left">
						<img src="images/t1.jpg" alt=" " class="img-responsive ">
					</div>
					<div class="author-grid-right">
						<h4><a href="#">Vaura Tegsner</a><span>Popular Singer</span></h4>
						<p>Nam libero tempore, cum soluta nobis est eligendi optio 
							cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis 
							voluptas assumenda est, omnis dolor repellendus.</p>
						<div class="social-icon">
							<a href="#" class="social-button twitter"><i class="fa fa-twitter"></i></a>
							<a href="#" class="social-button facebook"><i class="fa fa-facebook"></i></a> 
							<a href="#" class="social-button google"><i class="fa fa-google-plus"></i></a> 
							<a href="#" class="social-button dribbble"><i class="fa fa-dribbble"></i></a> 
						</div>  
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
			<div class="write-reply">
				<h4 class="w3ls-title">Write a Comment</h4>
				<form action="#" method="post"> 
					<input type="text" name="Name" placeholder="Name"  required="">
					<input type="text" name="Email" placeholder="Email" required=""> 
					<textarea name="Comment" placeholder="Write a comment here..." required=""></textarea>
					<input type="submit" value="Send">
				</form>
			</div>
		</div>
	</div>
	<!-- //single -->  
	<!-- footer start here -->
	<div class="agilebg-footer">
		<div class="footer">
			<div class="container">
				<div class="footer-agileinfo">
					<div class="col-md-3 col-sm-3 footer-wthree-grid">
						<h3>Navigation</h3>
						<ul>
							<li><a href="index.html">Home</a></li>
							<li><a href="about.html">About</a></li> 
							<li><a href="blog.html">Blog</a></li>
							<li><a href="codes.html">Short Codes</a></li>
							<li><a href="contact.html">Contact</a></li>
						</ul>
					</div>
					<div class="col-md-5 col-sm-5 footer-wthree-grid">
						<h3>Latest Tweet</h3>
						<div class="agileits-w3layouts-tweets">  
							<h5><i class="fa fa-twitter" aria-hidden="true"></i> Lorem ipsum</h5> 
						</div>
						<p>Aenean vitae metus sit amet purus sodales blandit. Nullam ut dolor eu urna viverra semper. Mauris est odio, laoreet laoreet sapien non, sollicitudin bibendum nulla.</p>
					</div>
					<div class="col-md-4 col-sm-4 footer-wthree-grid">
						<h3>Keep In Touch</h3>
						<div class="ftr-icons">
							<div class="ftr-iblock">
								<span class="glyphicon glyphicon-map-marker">  </span>
							</div>
							<div class="ftr-text">
								<p>Proin vel enim nec ipsum finibus. Duis euismod massa ut sem fringilla blandit.</p>
							</div>
							<div class="clearfix"> </div>
					   </div>
					   <div class="ftr-icons">
							<div class="ftr-iblock">
								<span class="glyphicon glyphicon-earphone">  </span>
							</div>
							<div class="ftr-text">
								<p>+333 222 23456</p>
							</div>
							<div class="clearfix"> </div>
					   </div>
					   <div class="ftr-icons">
							<div class="ftr-iblock">
							   <span class="glyphicon glyphicon-envelope">  </span>
							</div>
							<div class="ftr-text">
								<p><a href="mailto:info@example.com">mail@example.com</a></p>
							</div>
							<div class="clearfix"> </div>
					   </div>
					</div>
					<div class="clearfix"> </div>		
				</div>
			</div>
		</div>
	</div>
	<!-- //footer end here -->
	<!-- copy rights start here -->
	<div class="copy-right">
		<div class="container"> 
			<p>© 2017 Rock. All Rights Reserved | Design by  <a href="http://w3layouts.com/" target="_blank">W3layouts</a> </p>
		</div>
	</div>
	<!-- //copy right end here -->  
	<!-- smooth-scrolling-of-move-up -->
	<script type="text/javascript">
		$(document).ready(function() {
			/*
			var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
			};
			*/
			
			$().UItoTop({ easingType: 'easeOutQuart' });
			
		});
	</script> 
	<!-- //smooth-scrolling-of-move-up -->
	<!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/bootstrap.js"></script>
</body>
</html>